<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性面板</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../admin/css/reset.css" />
</head>

<body>
    <div class="layui-tab layui-tab-brief layui-form" lay-filter="setting-form" id="setting-form">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">节点属性</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="main-container">
                    <h5>基本属性</h5>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务ID：</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required" placeholder="" autocomplete="off" name="id"
                                class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务类型：</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required" placeholder="" autocomplete="off" name="type"
                                class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示名称：</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required" placeholder="" autocomplete="off"
                                name="display_name" class="layui-input">
                        </div>
                    </div>
                    <h5>样式设置</h5>
                    <div class="layui-form-item">
                        <label class="layui-form-label">宽度：</label>
                        <div class="layui-input-block">
                            <input type="number" lay-verify="" value="120" minValue="60" maxValue="999" name="width"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度：</label>
                        <div class="layui-input-block">
                            <input type="number" lay-verify="" value="40" minValue="60" maxValue="999" name="height"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">主题颜色：</label>
                        <div class="layui-input-block">
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" name="theme" value="" placeholder="" class="layui-input"
                                    id="theme-color">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="color-picker-theme"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">边框颜色：</label>
                        <div class="layui-input-block">
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" name="stroke" value="" placeholder="" class="layui-input"
                                    id="stroke-color">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="color-picker-stroke"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">字体颜色：</label>
                        <div class="layui-input-block">
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" name="color" value="" placeholder="" class="layui-input" id="color">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="color-picker-color"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">边线宽度：</label>
                        <div class="layui-input-block">
                            <input type="number" value="2" name="stroke_width" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <h5>拦截器</h5>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px;text-align: left;">前置拦截器：</label>
                        <div class="layui-input-inline" style="width: 320px">
                            <input type="text" lay-verify="" placeholder="" autocomplete="off" name="pre_interceptors"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px;text-align: left;">后置拦截器：</label>
                        <div class="layui-input-inline" style="width: 320px">
                            <input type="text" lay-verify="" placeholder="" autocomplete="off" name="post_interceptors"
                                class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--layui依赖-->
    <script src="../component/layui/layui.js"></script>
    <script src="../component/pear/pear.js"></script>
    <script src="../component/logicflow/customized/properties.js"></script>
    <script>
        window.child = function (obj) {
            layui.use(['element', 'jquery', 'form', 'colorpicker'], function () {
                let colorpicker = layui.colorpicker;
                let element = layui.element;
                let $ = layui.jquery;
                let form = layui.form;
                let newObj = initializationData(obj)
                /**
                 * 颜色选择器赋值
                 */
                layui.$(document).ready(function () {
                    let theme = ('theme' in newObj) && newObj.theme !== '' ? newObj.theme : '#FFFFFF'
                    let stroke = ('stroke' in newObj) && newObj.stroke !== '' ? newObj.stroke : '#000000'
                    let color = ('color' in newObj) && newObj.color !== '' ? newObj.color : '#000000'
                    let stroke_width = ('stroke_width' in newObj) && newObj.stroke_width !== '' ? newObj.stroke_width : 2
                    layui.$('input[name="theme"]').val(theme)
                    layui.$('input[name="stroke"]').val(stroke)
                    layui.$('input[name="color"]').val(color)
                    layui.$('input[name="stroke_width"]').val(stroke_width)

                    //主题颜色
                    colorpicker.render({
                        elem: '#color-picker-theme',
                        color: '#FFFFFF',
                        done: function (color) {
                            $('#theme-color').val(color);
                            propertyKeysSet()
                        }
                    });
                    //边框颜色
                    colorpicker.render({
                        elem: '#color-picker-stroke',
                        color: stroke,
                        done: function (color) {
                            $('#stroke-color').val(color);
                            propertyKeysSet()
                        }
                    });
                    //字体颜色
                    colorpicker.render({
                        elem: '#color-picker-color',
                        color: color,
                        done: function (color) {
                            $('#color').val(color);
                            propertyKeysSet()
                        }
                    });

                    //渲染单据
                    form.val('setting-form', newObj)
                    form.render();
                })


                /**
                 * 监听input change事件
                 */
                $(function () {
                    $("#setting-form input").off("change").change(function () {
                        let newData = form.val('setting-form');
                        propertyKeysSet(newData)
                    })
                })

            })
        };
    </script>


</body>

</html>